<template>
  	<div id="createSingleClass">
  		<header>
  			<i @click="goBack()"></i>
  			<div>创建单节课</div>
  		</header>
  		<div class="border-8"></div>
    	<ul>
	  		<li class='no-border'>
	  			<a>
					<label>选择直播类型:</label>
		 			<span class='red'>保存后不可更改</span>
	  			</a>
	  			<a class="liveType">
					<label @click="liveType()">
						<input type="radio" v-model="isFree" value='free'>
						<i></i>
					</label>
					<label @click="liveType()">
						<input type="radio" v-model="isFree" value='charge'>
						<i></i>
					</label>
	  			</a>
	  			<a class="liveType">
	  				<input type="text" placeholder="输入收费金额" v-model='singlePrice'>
	  			</a>
	  		</li>
	  		<div class="border-8"></div>
	  		<li>
	  			<a class="descTitle">
					<label>单节课封面</label>
	  			</a>
	  		</li>
	  		<li class='no-border'>
	  			<a class="uploadImg">
	  				<div class="img" v-if="isShow">
						<img class="delIcon" src="../../image/icon_delete.png" width="16" height="16" @click="delSelectImg()" />
						<img class="selectImg" :src="singleCover" width="50" height="50" />
					</div>
					<div class="upfileDiv">
						<img src="../../image/add_images.png" width="50" height="50" alt="" />
						<input type="file" name="file" class="upfile"  @change="upfile1" />
						<span>添加图片</span>
					</div>


	  			</a>
	  		</li>
	  		<div class="border-8"></div>
	  		<li>
	  			<a class="descTitle">
					<label>上传图片课件</label>
	  			</a>
	  		</li>
	  		<li class='no-border'>
	  			<a class="uploadImg">
					<div class="img" v-if="isShow">
						<img class="delIcon" src="../../image/icon_delete.png" width="16" height="16" @click="delSelectImg()" />
						<img class="selectImg" :src="picCourse" width="50" height="50" />
					</div>
					<div class="upfileDiv">
						<img src="../../image/add_images.png" width="50" height="50" alt="" />
						<input type="file" name="file" class="upfile"  @change="upfile2" />
						<span>添加图片</span>
					</div>

	  			</a>
	  		</li>
	  		<div class="border-8"></div>
	  		<li class='no-border'>
	  			<a class="type">
	  				<span>是否显示课件:</span>
					<label @click="type()">
						<input type="radio" v-model="showClass" value='不显示'>
						<i></i>
						<span>不显示</span>
					</label>
					<label @click="type()">
						<input type="radio" v-model="showClass" value='显示'>
						<i></i>
		 				<span>显示</i></span>
					</label>
	  			</a>
	  		</li>
	  		<li>
	  			<a class="finish" @click='finish'>
	  				完成
	  			</a>
	  		</li>
	  	</ul>
	</div>
</template>
<script>
	// 日期格式化
	import {formatDate} from '../../common/date.js'
	export default {
		data() {
			return {
				isShow: true,
				isFree: 'free',		//免费free 收费charge
				singlePrice: '',    //收费金额
				showClass: '不显示',  //是否显示课件
				singleCover: require('../../image/bg_pic.png'),  //封面
				picCourse: require('../../image/bg_pic.png'),  //图片课件
				cid: 1, //新创建课程id
			}
		},
		components: {

		},
		filters: {

		},
		methods: {
			goBack() {
				this.$router.back();
			},
		    type() {
		    	// console.log(this.showClass);
		    },
		    liveType() {
		    	console.log(this.liveType);
		    },
		    handleConfirm(val) {
		    	this.showTime = true;
		    },
			delSelectImg() {
				this.isShow = false;
			},
			upfile1: function() {
				var file = $(".upfile")[0].files[0];
				//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
				if(!/image\/\w+/.test(file.type)) {

					this.$utils._toast('请确保文件为图像类型');

					return false;
				}
				if(file.size > 5 * 1024 * 1024) {
					this.$utils._toast('上传图片不能超过5M');
					return false;
				}
				var _this = this;
				var reader = new FileReader();
				reader.readAsDataURL(file);
				// console.log(file);
				reader.onload = function(e) {
					var result = this.result;
					// console.log(result);
					_this.singleCover = result;
				}
			},
			upfile2: function() {
				var file = $(".upfile")[1].files[0];
				//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
				if(!/image\/\w+/.test(file.type)) {

					this.$utils._toast('请确保文件为图像类型');

					return false;
				}
				if(file.size > 5 * 1024 * 1024) {
					this.$utils._toast('上传图片不能超过5M');
					return false;
				}
				var _this = this;
				var reader = new FileReader();
				reader.readAsDataURL(file);
				// console.log(file);
				reader.onload = function(e) {
					var result = this.result;
					// console.log(result);
					_this.picCourse = result;
				}
			},
			finish() {
				var singleClass = JSON.parse(localStorage.getItem("singleClass"));
				if(this.isFree=='free') {
					if(this.isFree&&this.singleCover&&this.picCourse&&this.showClass) {
						singleClass.iffree = this.isFree;
						singleClass.charge = this.singlePrice;
						singleClass.singleCover = this.singleCover;
						singleClass.picCourse = this.picCourse;
						singleClass.showClass = this.showClass;
						singleClass.course_num = "1",  //2是系列课 1是单节课
						singleClass.uid = localStorage.getItem("loginMobile"),
						singleClass.course_type = "common",
						console.log(singleClass);
						//创建免费单节课程
			    		this.$api.post(this.$api.baseURLSchool,"updatedata/course/add",singleClass,r => {
							console.log(r);
							this.cid = r.data.id;
							this.$router.push({path:'/homeDetail',query:{name:'createSingle',id: this.cid}});
						},err => {
							console.log(err);
						})
						// localStorage.setItem("singleClass",JSON.stringify(singleClass));

					}else {
			    		this.$utils._toast('请检查上述内容是否输入完整');
			    	}
				}else {
					if(this.isFree&&this.singlePrice&&this.singleCover&&this.picCourse&&this.showClass) {
						singleClass.iffree = this.isFree;
						singleClass.charge = this.singlePrice;
						singleClass.singleCover = this.singleCover;
						singleClass.picCourse = this.picCourse;
						singleClass.showClass = this.showClass;
						singleClass.course_num = "1",  //2是系列课 1是单节课
                        console.log(localStorage.getItem("loginMobile"))
						singleClass.uid = localStorage.getItem("loginMobile"),
						singleClass.course_type = "common",
						console.log(singleClass);
						//创建收费单节课程
			    		this.$api.post(this.$api.baseURLSchool,"updatedata/course/add",singleClass,r => {
							console.log(r);
							this.cid = r.data.id;
							this.$router.push({path:'/homeDetail',query:{name:'createSingle',id: this.cid}});
						},err => {
							console.log(err);
						})

						// console.log(singleClass);
					}else {
			    		this.$utils._toast('请检查上述内容是否输入完整');
			    	}
				}

			}
		},
		created() {

		},
		mounted() {

		}
	}
</script>
<style lang="scss">
</style>
